<template>
  <div class="relative">
    <!-- 用户头像按钮 -->
    <div 
      @click="toggleMenu"
      class="relative p-1.5 rounded-md transition-all duration-500 cursor-pointer transform hover:scale-110 active:scale-95 user-menu-btn"
      :class="isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'"
    >
      <font-awesome-icon icon="user-circle" class="transition-transform duration-500 ease-spring" :class="isOpen ? 'rotate-12' : ''" />
    </div>
    
    <!-- 用户菜单下拉框 -->
    <div 
      v-if="isOpen" 
      class="absolute right-0 mt-3 w-64 rounded-xl shadow-lg overflow-hidden z-10 border origin-top-right"
      :class="[
        isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200',
        'animate-menu-appear'
      ]"
    >
      <!-- 用户信息头部 -->
      <div class="p-4 border-b" :class="isDarkMode ? 'border-gray-700' : 'border-gray-200'">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center text-white text-xl">
              {{ userInitials }}
            </div>
          </div>
          <div class="ml-3 truncate">
            <p class="text-sm font-medium" :class="isDarkMode ? 'text-white' : 'text-gray-900'">
              {{ user?.username || '用户' }}
            </p>
            <p class="text-xs truncate" :class="isDarkMode ? 'text-gray-400' : 'text-gray-500'">
              {{ user?.email || 'email@example.com' }}
            </p>
          </div>
        </div>
      </div>
      
      <!-- 菜单选项 -->
      <div class="py-1">
        <router-link 
          to="/profile" 
          class="w-full text-left px-4 py-2.5 text-sm flex items-center transition-all duration-300 transform hover:translate-x-1"
          :class="isDarkMode ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-700 hover:bg-gray-100'"
          @click="closeMenu"
        >
          <font-awesome-icon icon="user-gear" class="mr-2 transition-transform duration-300" :class="isDarkMode ? 'text-gray-400' : 'text-gray-500'" />
          个人中心
        </router-link>
        
        <router-link 
          to="/settings" 
          class="w-full text-left px-4 py-2.5 text-sm flex items-center transition-all duration-300 transform hover:translate-x-1"
          :class="isDarkMode ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-700 hover:bg-gray-100'"
          @click="closeMenu"
        >
          <font-awesome-icon icon="gear" class="mr-2 transition-transform duration-300" :class="isDarkMode ? 'text-gray-400' : 'text-gray-500'" />
          设置
        </router-link>
        
        <button 
          @click="logout"
          class="w-full text-left px-4 py-2.5 text-sm text-red-600 flex items-center transition-all duration-300 transform hover:translate-x-1"
          :class="isDarkMode ? 'hover:bg-red-900/40' : 'hover:bg-red-50/80'"
        >
          <font-awesome-icon icon="right-from-bracket" class="mr-2 transition-transform duration-300" />
          退出登录
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/userStore';

const props = defineProps({
  isDarkMode: {
    type: Boolean,
    default: false
  }
});

const router = useRouter();
const userStore = useUserStore();
const isOpen = ref(false);

// 获取用户信息
const user = computed(() => userStore.user);

// 用户首字母头像
const userInitials = computed(() => {
  const username = user.value?.username || '用户';
  return username.charAt(0).toUpperCase();
});

// 切换菜单状态
const toggleMenu = () => {
  isOpen.value = !isOpen.value;
};

// 关闭菜单
const closeMenu = () => {
  isOpen.value = false;
};

// 退出登录
const logout = () => {
  userStore.logoutUser();
  router.push('/login');
  closeMenu();
};

// 点击外部区域关闭菜单
const clickOutside = (event) => {
  const menu = document.querySelector('.user-menu-btn');
  if (isOpen.value && menu && !menu.contains(event.target)) {
    closeMenu();
  }
};

// 监听点击事件
onMounted(() => {
  document.addEventListener('click', clickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', clickOutside);
});

// 监听路由变化关闭菜单
watch(() => router.currentRoute.value, () => {
  closeMenu();
});
</script>

<style scoped>
.animate-menu-appear {
  animation: menu-appear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes menu-appear {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.ease-spring {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.from-purple-500 {
  --tw-gradient-from: #8b5cf6;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(139, 92, 246, 0));
}
.to-pink-500 {
  --tw-gradient-to: #ec4899;
}
</style> 